<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width:100px;height:100px;background-color:red;"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        //1.
        // div.onclick = function() {
        //     console.log(this); // this 指向dom元素本身
        // }

        //2.
        // div.addEventListener('click', function(){
        //     console.log(this); // this 指向dom元素本身
        // }, false);

        //3.
        // div.attachEvent('onclick', function(){
        //     console.log(this); // this 指向 window
        // });

        // // 解决办法
        // div.attachEvent('onclick', function(){
        //     handle.call(div);  // 让this 指向 dom元素本身
        // });
        // function handle() {
        //     console.log(this);
        // }


        // 封装兼容性方法，处理不同的浏览器
        // 给一个dom元素添加一个该事件类型的处理函数     
        function addEvent(elem, type, handle) {
            if(elem.addEventListener){
                elem.addEventListener(type, handle, false);
            }else if(elem.attachEvent){
                elem.attachEvent('on' + type, function(e){
                    handle.call(elem, e);
                })
            }else{
                elem['on' + type] = handle;
            }
        }


    </script>
</body>
</html>